import React from 'react';
import { 
  IonMenu, 
  IonHeader, 
  IonToolbar, 
  IonTitle, 
  IonContent, 
  IonList, 
  IonItem, 
  IonIcon, 
  IonLabel, 
  IonAvatar,
  IonMenuToggle,
  IonBadge
} from '@ionic/react';
import { 
  home, 
  settings, 
  person, 
  notifications, 
  mail, 
  helpCircle, 
  logOut,
  moon,
  sunny,
  star,
  heart,
  documentText,
  informationCircle,
  help
} from 'ionicons/icons';
import './Sidebar.css';
import { foodRoute, helpRoute, homeRoute, messageRoute, notificationRoute, planTempalteRoute, profileRoute, reportRoute, scheduleRoute, settingRoute, sportRoute, todoRoute, waterRoute, weightRoute } from '../route/route';

interface SidebarProps {
  isDarkMode: boolean;
  toggleDarkMode: () => void;
}

const Sidebar: React.FC<SidebarProps> = ({ isDarkMode, toggleDarkMode }) => {
  const menuItems = [
    { title: '分析报告', icon: home, path: reportRoute, badge: 0 },
    { title: '计划模板', icon: star, path: planTempalteRoute, badge: 5 },
    { title: '代办事项', icon: notifications, path: todoRoute, badge: 12 },
    { title: '食物管理', icon: mail, path: foodRoute, badge: 3 },
    { title: '体重记录', icon: person, path: weightRoute, badge: 0 },
    { title: '运动记录', icon: settings, path: sportRoute, badge: 0 },
    { title: '喝水记录', icon: helpCircle, path: waterRoute, badge: 0 },
  ];

  return (
    <IonMenu contentId="main-content" type="overlay">
      {/* <IonHeader>
        <IonToolbar color="primary">
          <IonTitle className="sidebar-title">应用导航</IonTitle>
        </IonToolbar>
      </IonHeader> */}
      
      <IonContent className="ion-padding">    
        {/* 导航菜单 */}
        <IonList lines="none" className="menu-list">
          {menuItems.map((item, index) => (
            <IonMenuToggle key={index} autoHide={false}>
              <IonItem 
                button 
                detail={false} 
                routerLink={item.path}
                routerDirection="root"
                className="menu-item"
              >
                <IonIcon slot="start" icon={item.icon} className="menu-icon" />
                <IonLabel>{item.title}</IonLabel>
                {item.badge > 0 && (
                  <IonBadge color="danger" slot="end">{item.badge}</IonBadge>
                )}
              </IonItem>
            </IonMenuToggle>
          ))}
        </IonList>

      </IonContent>
    </IonMenu>
  );
};

export default Sidebar;